<script setup>
// 这是一个hooks
import { useRoute } from "vue-router";
import { reactive, toRefs } from "vue";
const route = useRoute();
// console.log(route.query.a)
// console.log(route.query.b)
//解构这个route
// 这里会有一个问题:就是第一次的时候发现没有问题，但是之后再次点击就会有问题，因为如果你从一个响应式的对象上面去直接结构，那么这个结构出来的值就不会再是响应式的了
// 解决方案:使用toRefs
let { query } = toRefs(route);

// 路由规则的props
defineProps(["id", "title", "content"]);
</script>
<template>
  <div class="news-details">
    <!-- query接受参数 -->
    <!-- <ul>
      <li>编号:{{ query.id }}</li>
      <li>标题:{{ query.title }}</li>
      <li>内容:{{ query.content }}</li>
    </ul> -->
    <!-- params接受参数 -->
    <ul>
      <li>编号:{{ id }}</li>
      <li>标题:{{ title }}</li>
      <li>内容:{{ content }}</li>
    </ul>
  </div>
</template>

<style scoped>
.news-details {
  padding: 20px;
}
</style>
